<template>
<!-- 现有地址产品 -->
    <div id='shopcar_box'  >
        <div class='location lc' >
          <div class='cc'>
            <div class='ca'>
              <div class='current_adress' v-for='ff in position' :key='ff.id+ff.index'>
                <span class='current_position'>{{ff.position}}</span>
              </div>
            </div>
          </div>  
            <div class='goods_list' v-for='lists in shopcar' :key='lists.id+lists.index'>
                <p class='location'>{{lists.shopname}}-{{lists.location}}</p>
                <li v-for='lists in lists.img' :key='lists.id' class='listimg'>
                    <img :src='lists.imgsrc' alt=''>
                    <p>￥{{lists.price}}</p>
                </li>
            </div>
        </div>
        <!-- 其他地址产品 -->
        <div class='other_adress'>
          <div class='cc'> 
           <div class='ca2'>
            <div class='old_adress'>
                <span class='old_position'>其他地址</span>
            </div>
           </div>
          </div>
             <div class='goods_list' v-for='dd in oldPosition' :key='dd.id'>
                <p class='location'>{{dd.shopname}}-{{dd.location}}</p>
                <li v-for='dd in dd.img' :key='dd.id' class='listimg'>
                    <img :src='dd.imgsrc' alt=''>
                    <p>￥{{dd.price}}</p>
                </li>
            </div>
        </div>
        <!-- 底部导航 -->
        <div id='bottom'>
            <bottom></bottom>
        </div>
    </div>
</template>
<script>
export default {
  data() {
    return {
      shopcar: [],
      position: [],
      oldPosition: []
    };
  },
  created() {
    this.shopCar();
    this.shopOldPosition();
    this.shopPosition();
  },
  methods: {
    shopCar() {
      this.$jq.get(this.apiurl + "/shop/shopcar").done(result => {
        this.shopcar = result.data;
      });
    },
    shopPosition() {
      this.$jq.get(this.apiurl + "/shop/shopcar").done(result => {
        this.position = result.data3;
      });
    },
    shopOldPosition() {
      this.$jq.get(this.apiurl + "/shop/shopcar").done(result => {
        this.oldPosition = result.data2;
      });
    }
  }
};
</script>
<style scoped>
/* 格式化信息 */
body {
  background: #f4f4f4;
  font-size: normal;
  font-weight: normal;
}
p {
  margin: 0;
  padding: 0;
}
/* 地址栏 */
#shopcar_box{
    background:#f4f4f4;
}
.location,
.old_position {
  font-size: 0.94rem;
  color: #333;
  line-height: 1rem;
}
.location {
  width: 94%;
  margin: auto;
  padding-top: 1rem;
}
.lc {
  padding-top: 0;
}
.cc {
  width: 100%;
  text-align: center;
  margin:0 0 0.625rem;
  padding-top:0.975rem
}
.ca {
  border-radius: 2rem;
  background: #d1e7d3;
  display: inline-block;
  margin: auto;
  padding: 0.38rem 0.44rem;
  text-align: center;
}
.current_adress,
.old_adress {
  background: #47b34f url(/static/loc2.png) 0.81rem center no-repeat;
  font-size: 0.875rem;
  color: #fff;
  background-size: 0.8rem 1rem;
  border-radius: 1.375rem;
  display: inline-block;
  padding: 0rem 1rem;
}
.current_position,
.old_position {
  margin-left: 1rem;
  line-height: 1.5rem;
}
/* 商品信息 */
.goods_list {
  background: #fff url(/static/gc.png) center no-repeat;
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  background-size: cover;
  margin-bottom: 1rem;
}
.listimg {
  width: 18%;
  margin: 1rem 0;
  padding-top: 1.5rem;
}
.listimg > img {
  width: 100%;
}
.listimg > p {
  text-align: center;
  font-size:0.75rem
}
.old_position {
  background: #999;
  color: #fff;
}
.old_adress {
  background: #999 url(/static/loc2.png) 0.81rem center no-repeat;
  background-size: 0.8rem 1rem;
}
.ca2 {
  border-radius: 2rem;
  background: #e2e2e2;
  display: inline-block;
  margin: auto;
  padding: 0.38rem 0.44rem;
  text-align: center;
}
.other_adress{
    padding-bottom: 8rem;
    width: 94%;
    margin: auto;
}
/* 关于底部导航设置 */
#shopcar_box .a11{
    background-position: center -15.625rem;
    display: inline-block;
    height: 1.6rem;
    background-image: url(/static/nav4.png);
    background-repeat: no-repeat;
    background-size: 1.5rem 37.5rem;
    width: 100%;
}
#shopcar_box .a13{
    background-position: center -6.25rem;
    display: inline-block;
    height: 1.6rem;
    background-image: url(/static/nav4.png);
    background-repeat: no-repeat;
    background-size: 1.5rem 37.5rem;
    width: 100%;
}
#shopcar_box .at1{
  color: #555;
}
#shopcar_box .at3{
  color:#39ac69
}
</style>


